<template>
    <div class="">
        <input v-if="isInput" :value="modelValue" @input="emit('update:modelValue', $event.target.value)" type="text"
            placeholder="请输入">
        <div v-else-if="price">
            <p>{{ title }}</p>
            <p>{{ price }}</p>
            <p>{{ typeColor }}</p>
            <button @click="changeIndex('点击了孙子组件的按钮')">调用祖父组件的方法</button>
        </div>
        <div v-else>
            <div>{{ count }}</div>
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, defineExpose, defineEmits } from 'vue'
// 接收父组件传递的参数和事件
const props = defineProps({
    modelValue: String,
    isInput: {
        type: Boolean,
        default: true,
    },
    placeholder: String,
    title: String,
    price: String,
    typeColor: String,
    changeIndex: {
        type: Function,
        default: () => { }
    }
});
const emit = defineEmits(['update:modelValue']);
// console.log(props);

// 将实例传给父组件
const count = ref(0);
const num = ref(0);
const handleClick = () => {
    count.value = 2 ** (num.value++);
};
defineExpose({ handleClick, count });
</script>

<style scoped></style>
